<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm">
      <div class="max-w-6xl mx-auto px-4 py-4 flex items-center">
        <div class="text-2xl font-logo text-primary">logo</div>
        <nav class="ml-10">
          <ul class="flex space-x-8">
            <li><a href="#" class="text-gray-900 font-medium">首页</a></li>
            <li><a href="#" class="text-gray-500 hover:text-gray-900">产品</a></li>
            <li><a href="#" class="text-gray-500 hover:text-gray-900">解决方案</a></li>
            <li><a href="#" class="text-gray-500 hover:text-gray-900">关于我们</a></li>
            <li><a href="#" class="text-gray-500 hover:text-gray-900">联系我们</a></li>
          </ul>
        </nav>
        <div class="ml-auto flex items-center space-x-4">
          <a href="#" class="text-gray-500 hover:text-gray-900">登录</a>
          <button class="btn-primary !rounded-button whitespace-nowrap">注册</button>
        </div>
      </div>
    </header>

    <!-- 主体内容 -->
    <main class="max-w-2xl mx-auto px-4 py-12">
      <div class="text-center mb-10">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">企业注册</h1>
        <p class="text-gray-600">请填写您的企业信息完成注册</p>
      </div>

      <div class="bg-white rounded-xl shadow-sm p-8">
        <el-form 
          ref="formRef" 
          :model="formData" 
          :rules="formRules" 
          label-position="top"
          @submit.prevent="handleSubmit"
        >
          <!-- 企业名称 -->
          <el-form-item label="企业名称" prop="companyName">
            <el-input 
              v-model="formData.companyName" 
              placeholder="请输入企业全称"
              class="w-full"
            />
          </el-form-item>

          <!-- 统一社会信用代码 -->
          <el-form-item label="统一社会信用代码" prop="creditCode">
            <el-input 
              v-model="formData.creditCode" 
              placeholder="请输入18位企业唯一识别码"
              class="w-full"
            />
          </el-form-item>

          <!-- 联系人 -->
          <el-form-item label="联系人" prop="contactPerson">
            <el-input 
              v-model="formData.contactPerson" 
              placeholder="请输入企业联系人姓名"
              class="w-full"
            />
          </el-form-item>

          <!-- 联系电话 -->
          <el-form-item label="联系电话" prop="contactPhone">
            <el-input 
              v-model="formData.contactPhone" 
              placeholder="请输入联系人手机号码"
              class="w-full"
            />
          </el-form-item>

          <!-- 企业地址 -->
          <el-form-item label="企业地址" prop="address">
            <div class="grid grid-cols-3 gap-4 mb-4">
              <el-form-item prop="province" class="m-0">
                <el-select 
                  v-model="formData.province" 
                  placeholder="请选择省份" 
                  class="w-full"
                  @change="handleProvinceChange"
                >
                  <el-option 
                    v-for="province in provinces" 
                    :key="province.value" 
                    :label="province.label" 
                    :value="province.value"
                  />
                </el-select>
              </el-form-item>
              
              <el-form-item prop="city" class="m-0">
                <el-select 
                  v-model="formData.city" 
                  placeholder="请选择城市" 
                  :disabled="!formData.province"
                  class="w-full"
                  @change="handleCityChange"
                >
                  <el-option 
                    v-for="city in cities" 
                    :key="city.value" 
                    :label="city.label" 
                    :value="city.value"
                  />
                </el-select>
              </el-form-item>
              
              <el-form-item prop="district" class="m-0">
                <el-select 
                  v-model="formData.district" 
                  placeholder="请选择区县" 
                  :disabled="!formData.city"
                  class="w-full"
                >
                  <el-option 
                    v-for="district in districts" 
                    :key="district" 
                    :label="district" 
                    :value="district"
                  />
                </el-select>
              </el-form-item>
            </div>
            
            <el-form-item prop="addressDetail" class="m-0">
              <el-input 
                v-model="formData.addressDetail" 
                placeholder="请输入详细地址信息"
                class="w-full"
              />
            </el-form-item>
          </el-form-item>

          <!-- 操作按钮 -->
          <div class="flex justify-center space-x-4 mt-8">
            <button 
              type="button" 
              class="btn-secondary !rounded-button whitespace-nowrap"
              @click="handleCancel"
            >
              取消
            </button>
            <button 
              type="submit" 
              class="btn-primary !rounded-button whitespace-nowrap"
            >
              提交注册
            </button>
          </div>
        </el-form>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t mt-16">
      <div class="max-w-6xl mx-auto px-4 py-8">
        <div class="flex justify-between items-center">
          <div class="text-xl font-logo text-primary">logo</div>
          <div class="text-sm text-gray-500">
            © 2023 企业服务有限公司. 保留所有权利.
          </div>
          <div class="flex space-x-6">
            <a href="#" class="text-gray-500 hover:text-gray-900">隐私政策</a>
            <a href="#" class="text-gray-500 hover:text-gray-900">服务条款</a>
            <a href="#" class="text-gray-500 hover:text-gray-900">联系我们</a>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import * as CompanyApi from '@/api/business/company/index'
import { useRouter } from 'vue-router'

// 表单引用
const formRef = ref<FormInstance>()

const router = useRouter()

// 表单数据
const formData = reactive({
  companyName: '',
  creditCode: '',
  contactPerson: '',
  contactPhone: '',
  province: '',
  city: '',
  district: '',
  addressDetail: ''
})

// 地区数据
const regionData = {
  beijing: {
    name: "北京市",
    cities: {
      beijing: {
        name: "北京市",
        districts: ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区"]
      }
    }
  },
  shanghai: {
    name: "上海市",
    cities: {
      shanghai: {
        name: "上海市",
        districts: ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区"]
      }
    }
  },
  guangdong: {
    name: "广东省",
    cities: {
      guangzhou: {
        name: "广州市",
        districts: ["越秀区", "荔湾区", "海珠区", "天河区", "白云区", "黄埔区"]
      },
      shenzhen: {
        name: "深圳市",
        districts: ["罗湖区", "福田区", "南山区", "宝安区", "龙岗区", "盐田区"]
      }
    }
  }
}

// 省份选项
const provinces = computed(() => {
  return Object.keys(regionData).map(key => ({
    value: key,
    label: regionData[key].name
  }))
})

// 城市选项
const cities = computed(() => {
  if (!formData.province) return []
  
  const provinceData = regionData[formData.province as keyof typeof regionData]
  return Object.keys(provinceData.cities).map(key => ({
    value: key,
    label: provinceData.cities[key].name
  }))
})

// 区县选项
const districts = computed(() => {
  if (!formData.province || !formData.city) return []
  
  const provinceData = regionData[formData.province as keyof typeof regionData]
  const cityData = provinceData.cities[formData.city as keyof typeof provinceData.cities]
  return cityData.districts
})

// 处理省份变化
const handleProvinceChange = () => {
  formData.city = ''
  formData.district = ''
}

// 处理城市变化
const handleCityChange = () => {
  formData.district = ''
}

// 表单验证规则
const formRules = reactive<FormRules>({
  companyName: [
    { required: true, message: '请输入企业名称', trigger: 'blur' }
  ],
  creditCode: [
    { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
    { min: 18, max: 18, message: '统一社会信用代码应为18位', trigger: 'blur' }
  ],
  contactPerson: [
    { required: true, message: '请输入联系人姓名', trigger: 'blur' }
  ],
  contactPhone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  province: [
    { required: true, message: '请选择省份', trigger: 'change' }
  ],
  city: [
    { required: true, message: '请选择城市', trigger: 'change' }
  ],
  district: [
    { required: true, message: '请选择区县', trigger: 'change' }
  ],
  addressDetail: [
    { required: true, message: '请输入详细地址信息', trigger: 'blur' }
  ]
})

// 处理表单提交
// 修改 handleSubmit 函数
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    
    // 构造要提交的数据
    const submitData = {
      name: formData.companyName,
      creditCode: formData.creditCode,
      contactName: formData.contactPerson,
      contactPhone: formData.contactPhone,
      address: `${formData.province}${formData.city}${formData.district}${formData.addressDetail}`,
      verifyStatus: 0, // 资质审核状态默认为0
      status: 0        // 状态默认为0
    }
    
    // 调用后端接口提交数据
    const response = await CompanyApi.CompanyApi.createCompany(submitData)
    ElMessage.success('注册信息提交成功！')
    
    // 获取返回的 id 并跳转到 jobpost 页面
    const companyId = response.id // 假设后端返回的对象中有 id 字段
    // 跳转到 jobpost 页面并传递 id 参数
    router.push({
      path: '/business/jobpost',  // 修复路由路径
      query: { 
        companyId: companyId 
      }
    })
    
  } catch (error) {
    console.log('表单验证失败:', error)
    ElMessage.error('注册信息提交失败，请检查填写内容！')
  }
}

// 处理取消操作
const handleCancel = () => {
  formRef.value?.resetFields()
}
</script>

<style scoped>
body {
  min-height: 1024px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.font-logo {
  font-family: 'Pacifico', serif;
}

.btn-primary {
  background-color: #3b82f6;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 500;
}

.btn-secondary {
  background-color: #f3f4f6;
  color: #374151;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 500;
}
</style>

